<template>
    <div class="scroll-box">
        <div class="flex ac jc mg_m10 iconfont iconzhongxin blue" :style="{ 'font-size': ['0', y, y + 28][downState] + 'px', transform: `rotate(${deg}deg)` }"></div>
        <div class="scroll-y" ref="scroll_y">
            <div class="scroll-layut">
                <slot></slot>
                <div class="flex ac jc" v-if="showPullup">正在加载...</div>
            </div>
        </div>
        <slot name="pop"></slot>
    </div>
</template>

<script>
import BetterScroll from "better-scroll";
export default {
    name: "qg-scroll",
    props: {
        viewNode: {
            type: String,
            default: "",
        },
        showPullup: {
            type: Boolean,
            default: true,
        },
        initPull: {
            type: Boolean,
            default: true,
        },
        initPullDown: {
            type: Boolean,
            default: true,
        },
        downState: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            betterS: null,
            y: "",
            isDown: true,
            deg: 0,
            interval: null,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initScroll();
        });
    },
    watch: {
        viewNode: {
            handler(n) {
                this.goView(n);
            },
            // deep: true,
            // immediate: true
        },
        downState(n) {
            if (n === 2) {
                this.interval = setInterval(() => {
                    if (this.deg >= 360) this.deg = 0;
                    this.deg += 10;
                }, 20);
            } else {
                clearInterval(this.interval);
            }
        },
    },
    methods: {
        goView(e) {
            this.$nextTick(() => {
                setTimeout(() => {
                    let element = document.querySelector("#" + e);
                    if (element) this.betterS.scrollToElement(element, 20, 0, 0);
                }, 1000);
            });
        },
        initScroll() {
            this.betterS = new BetterScroll(this.$refs.scroll_y, {
                startY: 0,
                startX: 0,
                click: true,
                scrollY: true,
                // 忽略竖直方向的滚动
                scrollX: false,
                // eventPassthrough: 'vertical',
                // eventPassthrough: 'horizontal',
                bounce: true,
                pullUpLoad: this.initPull,
                pullDownRefresh: this.initPullDown,
                // slide: true,
                mouseWheel: {
                    speed: 20,
                    invert: false,
                    easeTime: 300,
                },
            });
            this.betterS.on("alterOptions", this.alterOptions);
            this.betterS.on("scrollStart", this.onscrollStart);
            this.betterS.on("scroll", this.onscroll);
            this.betterS.on("scrollEnd", this.onscrollEnd);
            this.betterS.on("pullingUp", this.onpullingup);
            this.betterS.on("pullingDown", this.onpullingDown);
            setTimeout(() => {
                this.betterS.refresh();
            }, 2000);
        },
        onscrollStart(res) {
            setTimeout(() => {
                this.$emit("update:downState", 1);
            });
        },
        alterOptions(res) {
            setTimeout(() => {
                this.$emit("update:downState", 1);
            });
        },
        async onscroll(res) {
            this.y = res.y / 4;
            if (res.y < 0) {
                this.$emit("update:downState", 0);
            }
            this.$emit("onscroll", res);
        },
        async onscrollEnd(res) {
            if (this.downState == 1) {
                this.$emit("update:downState", 0);
            }
            this.$emit("onscrollEnd", res);
            this.$nextTick(() => {
                this.betterS.refresh();
            });
        },
        onpullingDown(e) {
            this.$emit("update:downState", 2);
            this.betterS.finishPullDown();
            this.$emit("onpullingDown");
        },
        onpullingup() {
            this.$emit("update:showPullup", true);
            this.betterS.finishPullUp();
            console.log("下拉加载");
            this.$emit("onpullingup");
        },
    },
    computed: {
        idd() {
            let tiem = new Date().getTime();
            return (
                Math.random()
                    .toString(16)
                    .substr(2, 6) + tiem
            );
        },
    },
    destroyed() {
        this.betterS.off("scroll", this.onscroll); // 移除scroll事件回调onscroll
        this.betterS.off("pullingUp", this.onpullingup); // 移除pullingup事件回调onPullingUp
        this.betterS.off("scrollEnd", this.onscrollEnd); // 移除scrollEnd事件回调onscrollEnd
    },
};
</script>

<style lang="less" scoped>
.scroll-box {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.scroll-y {
    flex: 1;
    width: 100%;
    overflow: hidden;
    .scroll-layut {
        width: 100%;
    }
}
</style>
